import React, {memo} from 'react';
import HyIconStyle from "./HyIconStyle";

/**
 * 时间 2024年1月11日 10点12分
 * 组件说明
 * 由于我们使用了antd的表单
 * 所以我们这里需要将图标icon封装成为一个组件
 *
 * props说明:
 * iconContent:icon图标,必传
 *  注意:我们将会对iconContent进行判断,
 *  请使用 阿里巴巴矢量图标库 中的代码,
 *  否则不会显示,并将再控制台打印报错信息
 * size: 字体大小,老规矩,
 * 我们使用等比例大小,默认为16px
 * color: 字体颜色,默认为黑色
 * className
 *
 */
type Props = {
  iconContent:String,
  size?:Number,
  color?:String,
  className?:String,
};

export default memo(function UserIcon(props: Props) {
  if (/^&#.*;$/.test(props.iconContent as string)) {

    return (
      <>
        {/*以下代码在HyInput组件中有解释,这里我们不再赘述*/}
        {/* @ts-ignore*/}
        <HyIconStyle
          $color={props.color}
          $size={props.size}
          className={`${props.className?props.className:""} iconfont`} dangerouslySetInnerHTML={{__html: props.iconContent}}></HyIconStyle>
      </>
    );
  }else{
    try {
      throw new Error("iconContent属性值有误,请使用正确格式的iconfont");
    }catch (e) {
      console.error(e);
    }
    return (<></>);
  }


});
